<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改</title>
    <link href="./CSS-2.css" rel="stylesheet">

</head>
<body>

<div id="app">
    <div class="hideDiv" :style="styleHideDiv">
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th colspan="2">操作</th>
            </tr>
            <tr>
                <td v-text="userUpdate.id"></td>
                <td><input type="text" v-model.trim="userUpdate.name"/></td>
                <td><input type="text" v-model.number="userUpdate.age"/></td>
                <td><input type="text" v-model.trim="userUpdate.sex"/></td>
                <td>
                    <button @click="confirmUpdate()" class="add">更新</button>
                </td>
                <td>
                    <button @click="hideDiv" class="cancle">取消</button>
                </td>

            </tr>
        </table>
    </div>

    <div>
        <table>
            <tr>
                <th>
                    <h1>用户列表</h1>
                </th>
            </tr>
        </table>
        <table class="tableClass1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th colspan="2">操作</th>
            </tr>
            <tr v-for="(user1,index) in userList">
                <td v-text="user1.id"></td>
                <td v-text="user1.name"></td>
                <td v-text="user1.age"></td>
                <td v-text="user1.sex"></td>
                <td>
                    <button @click="showDiv(user1)" class="update">修改</button>
                </td>
                <td>
                    <button @click="" class="del">删除</button>
                </td>
            </tr>
        </table>
    </div>
</div>

<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script>
    /* restFul风格 url都是/VueAxios/user/参数 */
    /* 公共url前缀 */
    axios.defaults.baseURL = `http://127.0.0.1:8090`
    const APP = new Vue({
        //不要忘记# .等符号
        el: '#app',
        data: {
            url: '/VueAxios/user',
            userList: [],
            userUpdate: {
                id: '',
                name: '',
                age: '',
                sex: ''
            },
            emptyUser: {
                id: '',
                name: '',
                age: '',
                sex: ''
            },
            styleHideDiv: {
                display: 'none'
            }
        },
        methods: {
            async getUserList() {
                let {
                    data: value
                } = await axios.get(`${this.url}`)
                this.userList = value
            },
            /* 以下是专门用于修改的方法 */
            //ajax连接 axios实现
            async update() {
                let id = this.userUpdate.id
                let name = this.userUpdate.name
                let age = this.userUpdate.age
                let sex = this.userUpdate.sex
                await axios.put(`${this.url}/${id}/${name}/${age}/${sex}`)
                this.getUserList()
            },
            //修改确认的判断
            confirmUpdate() {
                if (!this.userIsEmpty(this.userUpdate)) {
                    if (this.confirmPanel('修改')) {
                        this.update()
                    }
                }
            },
            // 隐藏 用于更新的div
            hideDiv() {
                this.styleHideDiv.display = 'none'
                this.clearUser(this.userUpdate)
            },
            // 显示 用于更新的div
            showDiv(user) {
                this.shallowCopy(user, this.userUpdate)
                this.styleHideDiv.display = 'block'
            },

            /* 工具方法 */
            //确认框
            confirmPanel(confirmWord) {
                return confirm(`确认${confirmWord}??`)
            },
            //判断输入的user是否为空
            userIsEmpty(user) {
                if (user.name == 0 || user.age == 0 || user.sex == 0) {
                    alert("不能为空!")
                    return 1
                } else {
                    return 0
                }
            },
            //浅拷贝
            shallowCopy(userFrom, userTo) {
                userTo.id = userFrom.id
                userTo.name = userFrom.name
                userTo.age = userFrom.age
                userTo.sex = userFrom.sex
            },
            //清空参数user
            clearUser(user) {
                user = {}
            }
        },
        mounted() {
            this.getUserList()
        }
    })
</script>
</body>
</html>
